<template>
    <el-dialog destroy-on-close :before-close="closeDialog" v-model="state.dialog.isShowDialog" :title="state.dialog.title"
        width="70%">
        <el-row style="align-items: center;" class="search-group">
            <span>设备编号：
                <el-input style="width:180px" placeholder="请输入设备编号" clearable v-model="state.queryParam.code" /></span>
            <span style="margin-left: 20px;">设备名称：<el-input style="width:180px;margin-left: 20px;" placeholder="请输入设备名称"
                    clearable v-model="state.queryParam.name" /></span>
            <span style="margin-left: 20px;">模块：
                <el-select @change="onModuleChange" style="width:180px;margin-left: 20px;" v-model="state.module"
                    class="m-2" placeholder="Select" clearable>
                    <el-option v-for="item in state.modelList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </span>
            <span class="btns_group">
                <el-button style="margin-left: 20px;" type="primary" round size="small" @click="getTableData">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
            </span>
        </el-row>
        <el-table border height="auto" :data="state.tableList" style="margin-top: 20px;" v-loading="state.Tabls.loading">
            <el-table-column label="设备编号" prop="code"></el-table-column>
            <el-table-column label="设备名称" prop="name"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" text size="small" @click="addDev(scope.row.code)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="onHandleSizeChange($event)" @current-change="onHandleCurrentChange($event)"
            class="mt15" :pager-count="5" :page-sizes="[10, 50, 200, 800]" v-model:current-page="state.queryParam.pageNum"
            background v-model:page-size="state.queryParam.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="state.queryParam.total">
        </el-pagination>

    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useIotDevicePageApi } from '/@/api/iot/device';
import { useAttendPointCreateApi } from '/@/api/attend/point';

// 定义变量内容
const emit = defineEmits(['refresh'])
const state = reactive({
    // 弹窗信息
    dialog: {
        isShowDialog: false,
        title: '',
        loading: false,
    },
    // 表单提交
    formData: {
        code: '',
        codeList: [] as any
    },
    // 查询参数
    queryParam: {
        code: '',
        name: '',
        pageSize: 10,
        pageNum: 1,
        total: 0,
    },
    Tabls: {
        loading: false,
        type: 0,
        title: '',
    },
    deviceCode: '',
    tableList: [],
    modelList: [
        {
            value: 'attend',
            label: '考勤'
        },
        {
            value: 'access',
            label: '门禁'
        },
        {
            value: 'pos',
            label: '消费'
        }
    ] as any,
    module: 'attend'
})
// 选中更改
const selectedChange = (codes: any) => {
    state.formData.codeList = []
    codes.forEach((item: { code: string; }) => {
        state.formData.codeList.push(item.code)
    })
}

const getTableData = () => {
    state.Tabls.loading = true
    useIotDevicePageApi(state.queryParam, state.module).then(({ content }) => {
        state.tableList = content.list
        state.queryParam.pageNum = content.pageNum
        state.queryParam.pageSize = content.pageSize
        state.queryParam.total = content.total
    })
    state.Tabls.loading = false
}

const onModuleChange = (value: any) => {
    state.module = value
    getTableData()
}

// 打开dialog
const openDialog = (row: { code: string; name: string }) => {
    if (row) {
        state.formData.code = ''
        state.dialog.title = `编辑`
        state.dialog.isShowDialog = true
        state.queryParam.code = ''
        getTableData()
    } else {
        state.formData.code = ''
        state.dialog.title = `新增`
        state.dialog.isShowDialog = true
        state.queryParam.code = ''
        getTableData()
    }
}

// 
const addDev = (code: string) => {
    useAttendPointCreateApi({ deviceCode: code, module: state.module }).then((res: any) => {
        ElMessage.success('关联成功')
        getTableData()
        closeDialog()
    })
}

const closeDialog = () => {
    emit('refresh')
    state.dialog.isShowDialog = false
}

// 分页改变
const onHandleSizeChange = (val: number) => {
    state.queryParam.pageSize = val;
    getTableData()
}
const onHandleCurrentChange = (val: number) => {
    state.queryParam.pageNum = val;
    getTableData()
}
// 暴露变量
defineExpose({
    openDialog
})

</script>

